<script setup>
import { onMounted, onUnmounted, ref } from "vue";

import Swiper from "../../components/Swiper.vue";

//images
import tire from "@/assets/img/home/tires/tire.png";
let productList = ref([]);
// const productList = [
//   {
//     name: "M-TRAC-1",
//     value: 0,
//     image: tire,
//   },
//   {
//     name: "M-TRAC-2",
//     value: 1,
//     image: tire,
//   },
//   {
//     name: "M-TRAC-3",
//     value: 2,
//     image: tire,
//   },
//   {
//     name: "M-TRAC-4",
//     value: 3,
//     image: tire,
//   },
//   {
//     name: "M-TRAC-5",
//     value: 4,
//     image: tire,
//   },

//   {
//     name: "M-TRAC-6",
//     value: 5,
//     image: tire,
//   },
//   {
//     name: "M-TRAC-7",
//     value: 6,
//     image: tire,
//   },
//   {
//     name: "M-TRAC-8",
//     value: 7,
//     image: tire,
//   },
// ];
//hooks
const body = document.getElementsByTagName("body")[0];

onMounted(() => {
  body.classList.add("presentation-page");
  body.classList.add("bg-gray-200");
});
onUnmounted(() => {
  body.classList.remove("presentation-page");
  body.classList.remove("bg-gray-200");
});
</script>

<template>
  <div
    class="row"
    data-aos="fade-up"
    data-aos-anchor-placement="center-bottom"
    data-aos-delay="300"
  >
    <!-- data-aos-delay="300" -->
    <Swiper :list="productList" />
  </div>
</template>
